<template>
  <div class="home-content">
    <div class="center-panel">
      <div class="card-list">
        <!--动态内容-->
        <div class="feed-card">
          <div class="content">
            <!--动态内容 -->
            <div class="card" style="margin-top: 8px;">
              <a @click="btnClick('user',forumById)" class="user-head c-pointer avatar-comp" href="javascript:void(0)">
                <div class="bili-avatar">
                  <img class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                       :src="forumById.avatar" :lazy="true"
                  >
                </div>
              </a>
              <div class="main-content" style="padding-bottom: 0px;">
                <div class="user-name fs-16 ls-0 d-i-block">
                  <a v-if="forumById.user" @click="btnClick('user',forumById)" href="javascript:void(0)"
                     class="c-pointer"
                  >{{ forumById.user.nickName }}</a>
                </div>
                <div class="time fs-12 ls-0 tc-slate">
                  <span>{{ parseTime(forumById.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                </div>

                <!--                <div class="card-content" style="position: relative;">
                                  <div class="text p-rel description">
                                    <div class="content">
                                      <div class="content-full" v-if="!forumById.remark">分享图片</div>
                                      <div class="content-full" v-else v-html="formatSolution(forumById.remark)"></div>
                                      <div style="padding-top: 10px;" v-if="forumById.img && forumById.img.length>0"
                                           v-for="(itemImg,indexImg) in forumById.img"
                                           :key="indexImg"
                                      >
                                        <img style="width: 100%;height: 100%" :src="changeUrl(itemImg.fileName)">
                                      </div>
                                    </div>
                                  </div>
                                </div>-->

                <div class="card-content" style="position: relative;">
                  <div class="post-content">
                    <div class="original-card-content">
                      <div class="text p-rel description active" @click="btnClick('edit',item)">
                        <div class="content">
                          <div class="content-full" v-if="!forumById.remark">分享图片</div>
                          <div class="content-full" v-else v-html="formatSolution(forumById.remark)"></div>
                          <!--                            <div style="padding-top: 10px;" v-if="item.img && item.img.length>0"
                                                           v-for="(itemImg,indexImg) in item.img"
                                                           :key="indexImg"
                                                      >
                                                        <img style="width: 100%;height: 100%" :src="changeUrl(itemImg.fileName)">
                                                      </div>-->
                        </div>
                      </div>
                      <div class="imagesbox">
                        <div class="zoom-wrap" v-if="forumById.img && forumById.img.length>0">
                          <ul class="zoom-list list-none zoom-1" v-if="forumById.img.length===1">
                            <li class="card111 card-1" v-for="(itemImg,indexImg) in forumById.img"
                                :key="indexImg"
                            >
                              <el-image class="img-content" :lazy="true"
                                        style="width: 240px; height: 240px;"
                                        :preview-src-list="forumById.srcList"
                                        :src="changeUrl(itemImg.fileName)"
                              ></el-image>
                            </li>
                          </ul>
                          <ul class="zoom-list list-none zoom-3" v-if="forumById.img.length>1">
                            <li class="card111 card-3" v-for="(itemImg,indexImg) in forumById.img"
                                :key="indexImg"
                            >
                              <el-image class="img-content" :lazy="true"
                                        :preview-src-list="forumById.srcList"
                                        :src="changeUrl(itemImg.fileName)"
                              ></el-image>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!--点赞评论按钮 -->
                <div class="button-bar tc-slate">
                  <div class="single-button c-pointer">
                    <span class="text-bar selected">
                      <i class="bp-svg-icon single-icon comment-hover"></i>
                      <span class="text-offset">{{ total }}</span>
                    </span>
                  </div>
                  <div class="single-button c-pointer p-rel">
                    <span class="text-bar">
                      <i class="bp-svg-icon single-icon zan"></i>
                      <span class="text-offset">{{ forumById.fabulous }}</span>
                    </span>
                  </div>
                </div>
              </div>

              <!--投诉、举报】删除按钮 -->
              <div class="button-area c-pointer" style="height: 35px"
                   @mouseover="subsOpen('trends')"
                   @mouseleave="subsStop('trends')"
              >
                <div class="more-button bp-icon-font icon-more-1">
                  <div v-if="forumById.user && (forumById.user.userId==user.userId)"
                       style="-webkit-text-stroke-width: 0px;top: 24px;right: -10px"
                       class="more-panel fs-14 ls-0" :style="{'display':showPoints?'block':'none'}"
                  >
                    <p @click="btnClick('del',forumById)" class="child-button c-pointer">删除</p>
                  </div>
                  <div v-else style="-webkit-text-stroke-width: 0px;top: 24px;right: -10px"
                       class="more-panel fs-14 ls-0" :style="{'display':showPoints?'block':'none'}"
                  >
                    <p @click="btnClick('jubao',forumById)" class="child-button c-pointer">举报</p>
                  </div>
                </div>
              </div>

              <!--评论内容 -->
              <div class="pinglun_class">
                <div class="panel-area" style="position: relative;">
                  <div class="bb-comment ">
                    <div class="comment-send ">
                      <div class="user-face" v-if="user && user.userId">
                        <el-image :lazy="true" class="user-head2" :src="avatar"></el-image>
                        <!--                          <img class="user-head2" :src="avatar">-->
                      </div>
                      <div class="user-face" v-else>
                        <img class="user-head2" src="../../assets/images/logo/icon-unlogin.png">
                      </div>
                      <!--                      <div class="user-face">
                                              <img class="user-head2" :src="avatar">
                                            </div>-->
                      <div class="textarea-container">
                        <i class="ipt-arrow"></i>
                        <el-input v-model="replyForm.remark" type="textarea"
                                  placeholder="发一条友善的评论"
                                  :maxlength="500" show-word-limit
                                  :autosize="{minRows: 2.5, maxRows: 8}"
                                  :style="{width: '100%'}"
                        >
                        </el-input>
                        <button
                          @click="(replyForm.remark && replyForm.remark.trim().length>0)?submitFormReply(forumById):''"
                          :class="[(replyForm.remark && replyForm.remark.trim().length>0)?'':'disabled']"
                          type="button" class="comment-submit"
                        >发表评论
                        </button>
                      </div>
                      <!--                      <div class="comment-emoji">
                                              <i class="face"></i>
                                              <span class="text">表情</span>
                                            </div>-->
                    </div>

                    <div class="comment-list has-limit" v-for="(itemReply,indexReply) in replyList"
                         :key="indexReply"
                    >
                      <div class="list-item reply-wrap ">
                        <div class="user-face">
                          <a href="javascript:void(0)" @click="btnClick('userRely',itemReply)">
                            <div class="bili-avatar">
                              <img width="48" height="48"
                                   class="bili-avatar-img bili-avatar-face bili-avatar-img-radius"
                                   :src="changeAvatar(itemReply.fromUser.avatar)"
                              >
                              <span class="bili-avatar-icon"></span>
                            </div>
                          </a>
                        </div>
                        <div class="con ">
                          <div class="user">
                            <a @click="btnClick('userRely',itemReply)" href="javascript:void(0)" class="name"
                               style="color: #FB7299;"
                            >{{ itemReply.fromUser.nickName }}</a>
                          </div>
                          <p class="text" v-html="formatSolution(itemReply.remark)">{{ itemReply.remark }}</p>
                          <div class="info">
                            <span class="time">{{
                                parseTime(itemReply.createTime, '{y}-{m}-{d} {h}:{i}:{s}')
                              }}</span>
                            <!--                            <span class="like "><i></i><span></span></span>
                                                        <span class="hate "><i></i></span>
                                                        <span class="reply btn-hover">回复</span>-->
                            <div class="operation more-operation">
                              <div class="spot"
                                   @mouseover="subsOpen('reply',itemReply)"
                                   @mouseleave="subsStop('reply',itemReply)"
                              >
                                <div class="opera-list" v-if="itemReply.action">
                                  <ul v-if="itemReply.fromUser.userId==user.userId">
                                    <li class="blacklist" @click="btnClick('delReply',itemReply,forumById)">删除</li>
                                  </ul>
                                  <ul v-else>
                                    <li class="report">举报</li>
                                  </ul>
                                </div>
                              </div>

                            </div>
                          </div>
                          <div class="reply-box"></div>
                          <div class="paging-box"></div>
                        </div>
                      </div>
                    </div>
                    <div class="loading-state">没有更多评论</div>
                  </div>
                </div>
              </div>

            </div>


          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ImageUpload from '@/components/ImageUpload'
import { getTrends, delTrends, updateReplyNumberDel, updateReplyNumber } from '@/api/trends'
import { listReply, getReply, addReply, delReply } from '@/api/plainReply'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import store from '@/store'
import { addMessage } from '@/api/message'

export default {
  name: 'edit',
  components: { ImageUpload },
  data() {
    return {
      showPoints: false,
      picked: null,
      jubaoText: '',
      radioList: [
        { id: 1, value: 1, name: 'report-type', title: '垃圾广告' },
        { id: 2, value: 2, name: 'report-type', title: '话题不相关' },
        { id: 3, value: 3, name: 'report-type', title: '色情' },
        { id: 4, value: 4, name: 'report-type', title: '人身攻击' },
        { id: 5, value: 5, name: 'report-type', title: '违法信息' },
        { id: 0, value: 0, name: 'report-type', title: '其他' }
      ],
      replyList: [],
      open: false,
      forumById: [],
      total: 0,
      replyForm: {},
      rules: {
        remark: [
          { required: true, message: '动态内容不能为空', trigger: 'blur' },
          { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'user', 'avatar'
    ]),
    trendsId() {
      return this.$route.query.id
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询动态列表 */
    async getList() {
      await getTrends(this.trendsId).then(response => {
        this.forumById = response.data
        this.forumById.img = this.change(this.forumById.img)
        this.forumById.srcList = []
        this.forumById.img.map(item2 => {
          this.forumById.srcList.push(this.changeUrl(item2.fileName))
        })
        this.forumById.avatar = this.changeAvatar(this.forumById.user.avatar)
        this.getReplyList(this.trendsId)
      })
    },
    getReplyList(val) {
      let params = {
        contentId: val,
        status: '0'
      }
      listReply(params).then(response => {
        this.replyList = response.rows
        this.total = response.total
      })
    },

    //发布评论
    submitFormReply(val) {
      if (!getToken()) {
        this.$confirm('您未成功登录，您可以继续留在该页面，或者登录', '系统提示', {
            confirmButtonText: '登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('LogOut').then(() => {
            location.href = '/login'
          })
        }).catch(() => {
          this.replyForm = {}
        })
        return
      }
      if (this.replyForm.remark && this.replyForm.remark.length > 0) {
        this.replyForm.fromId = JSON.parse(JSON.stringify(this.user.userId))
        this.replyForm.contentId = JSON.parse(JSON.stringify(this.trendsId))
        addReply(this.replyForm).then(response => {
          this.msgSuccess('评论成功')
          this.replyForm = {}
          this.getReplyList(this.trendsId)
          updateReplyNumber(this.trendsId)
          if (val.user.userId == this.user.userId) {
            return
          }
          let message = {
            fromId: this.user.userId,
            fromName: this.user.nickName,
            toId: val.user.userId,
            toName: val.user.userName,
            messageTitle: '动态',
            identity: '1',
            type: '1',
            payload: JSON.stringify(val),
            messageContent: '回复了你的动态'
          }
          addMessage(message)
        })
      }
    },
    jbClick() {

    },
    subsOpen(e, val) {
      if (e == 'trends') {
        this.showPoints = true
      } else if (e == 'reply') {
        this.replyList.map(item => {
          this.$set(item, 'action', false)
        })
        this.$set(val, 'action', true)
      }

    },
    subsStop(e, val) {
      if (e == 'trends') {
        this.showPoints = false
      } else if (e == 'reply') {
        this.$set(val, 'action', false)
      }

    },

    btnClick(e, val, data) {
      if (e == 'del') {
        this.$confirm('确定要删除此条动态吗？', '删除动态', {
          cancelButtonText: '我点错了',
          confirmButtonText: '删除',
          type: 'warning'
        }).then(function() {
          return delTrends(val.trendsId)
        }).then(() => {
          this.msgSuccess('删除成功')
          this.$router.push('/trends/list')
        })
      } else if (e == 'delReply') {
        this.$confirm('确定要删除此条评论吗？', '删除评论', {
          cancelButtonText: '我点错了',
          confirmButtonText: '删除',
          type: 'warning'
        }).then(function() {
          return delReply(val.replyId)
        }).then(() => {
          this.msgSuccess('删除成功')
          this.getReplyList(data.trendsId)
          updateReplyNumberDel(data.trendsId)
        })
      } else if (e == 'jubao') {
        this.open = true
      } else if (e == 'reply') {
        if (val.showReplyList) {
          this.$set(val, 'showReplyList', false)
        } else {
          this.$set(val, 'showReplyList', true)
        }
        this.forumById.map(item => {
          if (item.trendsId !== val.trendsId) {
            this.$set(item, 'showReplyList', false)
          }
        })
        // this.$set(val, 'showReplyList', true)
        this.getReplyList(val.trendsId)
      } else if (e == 'user') {
        this.$router.push({
          path: '/personal',
          query: {
            id: val.userId
          }
        })
      } else if (e == 'userRely') {
        this.$router.push({
          path: '/personal',
          query: {
            id: val.fromId
          }
        })
      }
    },
    close() {
      this.open = false
      this.picked = null
      this.jubaoText = ''
    }
  }
}
</script>

<style scoped lang="scss">
@import "./index";
@import "./reply";
</style>
<style scoped>
/deep/ .el-image__preview {
  cursor: zoom-in;
}

/deep/ .el-textarea__inner {
  width: 100%;
  min-height: 22px;
  max-height: 300px;
  letter-spacing: 1px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: pre-wrap;
  color: #222;
  background-color: #fff;
  font-size: 14px;
  vertical-align: baseline;
  outline: none;
  line-height: 22px;
  border-radius: 4px;
  word-break: break-word;
  word-wrap: break-word;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

.loading-state {
  margin-top: 30px;
  height: 64px;
  line-height: 64px;
  font-size: 12px;
  color: #99A2AA;
  text-align: center;
  margin-bottom: 80px;
}
</style>
